<template>
	<view class="CenterContainer">
		<view class="centerHeader">
			<view class="CheaderBox ">
				<image src="../../static/images/center/shezhi.png" ></image>
				<image src="../../static/images/right.png" mode=""></image>
			</view>
			<view class="CmiddleBox" v-if="userInfoData.nickName">
				<image :src="userInfoData.avatarUrl"></image>
				<view class="userName">
					<text>{{userInfoData.nickName}}</text>
				</view>
			</view>
			<view class="CmiddleBox" v-else>
				<image :src="avatar" @click="toLogin"></image>
				<view class="userName" @click="toLogin">
					<text>登录</text>
					<text>|</text>
					<text>注册</text>
				</view>
			</view>
			<view class="headerBottom">
				<image v-for="Cheader1 in CenterHeader.data.items" :key="Cheader1.id" :src="Cheader1.above_image.img_url"></image>
			</view>
		</view>
		<view class="Middletop">
			<view class="Blank1"></view>
			<view class="BBox">
				<view class="BItem" v-for="M1 in CentertMid1.data.items" :key="M1.id">
					<image :src="M1.above_image.img_url"></image>
					<view>{{M1.sub_title}}</view>
				</view>
			</view>
		</view>
		<view class="Middlebottom">
			<view class="Blank2"></view>
			<view class="BBox">
				<view class="BItem" v-for="M2 in CentertMid2.data.items" :key="M2.key">
					<view class="BItemNum">{{M2.above_text}}</view>
					<view>{{M2.below_text}}</view>
				</view>
			</view>
		</view>
		<view class="centerBottom">
			<view class="BottomTitle">
				<image class="leftImage" :src="CenterBottom.header.left_image.img_url"></image>
				<image class="rightImage" :src="CenterBottom.header.right_image.img_url" ></image>
			</view>
			<view class="BottomMain">
				<view class="BMBox" v-for="B1 in CenterBottom.data.items" :key="B1.id">
					<image :src="B1.above_image.img_url"></image>
					<view class="BMBoxtext">{{B1.below_text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex'
	export default {
		data() {
			return {
				userInfoData:{}
			};
		},
		mounted(){
			this.getCenterList(),
			//从storage里面拿到用户信息
			this.userInfoData=wx.getStorageSync('userinfo_key')
			console.log(this.userInfoData);
		},
		methods:{
			//获取个人中心数据
			getCenterList(){
				this.$store.dispatch('getCenterList')
			},
			//点击跳转去登录页
			toLogin(){
				wx.navigateTo({
					url:"/pages/login/login"
				})
			}
		},
		computed:{
			...mapGetters(['centerList','avatar']),
			// ...mapState({
			// 	CenterData:state=>state.center.CenterData
			// })
			CenterHeader(){
				return this.centerList[0] || {}
			},
			CentertMid1(){
				return this.centerList[1] || {}
			},
			CentertMid2(){
				return this.centerList[2] || {}
			},
			CenterBottom(){
				return this.centerList[3] || {}
			}
		}
	}
</script>

<style lang="stylus">
	.CenterContainer
		.centerHeader
			width 100%
			height 414rpx
			display flex
			flex-direction column
			background-color #42cc56
			.CheaderBox
				width 100%
				height 84rpx
				display flex
				justify-content space-between
				image
					margin 40rpx
					width 48rpx
					height 48rpx
			.CmiddleBox
				width 828rpx
				height 140rpx
				margin 60rpx 20rpx
				display flex
				image
					width 140rpx
					height 140rpx
					border-radius 50%
				.userName
					width 628rpx
					height 52rpx
					margin 40rpx 40rpx
					font-size 40rpx
					color #ffffff
					text
						margin 0 10rpx
			.headerBottom
				display flex
				background-color #333333
				height 72rpx
				width 90%
				margin-left 30rpx
				border-top-left-radius 40rpx
				border-top-right-radius 40rpx
				image
					display block
					width 144rpx
					height 32rpx
					margin-top 20rpx
					margin-left 40rpx
		.Middletop
			width 700rpx
			height 242rpx
			margin-left 20rpx
			margin-top 40rpx
			border-radius 20rpx
			background-color #e5e5e5
			.Blank1
				height 72rpx
				margin-top 10rpx
			.BBox
				width 788rpx
				display flex
				.BItem
					width 140rpx
					height 102rpx
					display flex
					flex-direction column
					align-items center
					margin 20rpx 0
					image
						width 56rpx
						height 56rpx
		.Middlebottom
			width 700rpx
			height 230rpx
			margin-left 20rpx
			margin-top 40rpx
			border-radius 20rpx
			background-color #e5e5e5
			.Blank2
				height 72rpx
				margin-top 10rpx
			.BBox
				width 788rpx
				display flex
				.BItem
					width 140rpx
					height 102rpx
					display flex
					flex-direction column
					align-items center
					margin 20rpx 0
					.BItemNum
						font-size 40rpx
						color #ff0000
						margin-bottom 20rpx
		.centerBottom
			width 700rpx
			height 832rpx
			margin-left 20rpx
			margin-top 40rpx
			border-radius 20rpx
			background-color #e5e5e5
			.BottomTitle
				width 788rpx
				height 52rpx
				display flex
				justify-content space-between
				.leftImage
					width 170rpx
					height 32rpx
					margin-top 20rpx
					margin-left 20rpx
				.rightImage
					width 20rpx
					height 32rpx
					margin-top 20rpx
					margin-right 120rpx
			.BottomMain
				width 700rpx
				// height 748rpx
				margin-top 20rpx
				// background-color #007AFF
				display flex
				flex-wrap wrap
				.BMBox
					display flex
					flex-direction column
					align-items center
					width 25%
					height 110rpx
					// background-color #00A200
					margin-top 20rpx
					image
						width 62rpx
						height 62rpx
					.BMBoxtext
						font-size 30rpx
</style>
